<template>
  <div class="info-container">
    <my-nav-bar title="我的资料" />
    <div class="content">
      <!-- 头像部分 -->
      <div class="head">
        <my-cell
          class="head-cell"
          :isShowIcon="false"
          title="头像"
          :avatar="avatar"
          @click="$router.push('/my/edit?type=avatar')"
        />
      </div>
      <!-- body -->
      <div class="body">
        <my-cell
          class="top"
          :isShowIcon="false"
          title="昵称"
          :content="userInfo.nickname"
          @click="$router.push('/my/edit?type=nickname')"
        />
        <my-cell
          @click="showGender = true"
          :isShowIcon="false"
          title="性别"
          :content="gender"
        />
        <my-cell
          @click="showArea = true"
          :isShowIcon="false"
          title="地区"
          :content="areaList.city_list[userInfo.area]"
        />
        <my-cell
          class="bottom"
          :isShowIcon="false"
          title="个人简介"
          :content="userInfo.intro"
          @click="$router.push('/my/edit?type=intro')"
        />
      </div>
      <!-- footer -->
      <div class="footer" @click="logout">
        退出登录
      </div>
    </div>
    <!-- 性别弹出层 -->
    <van-popup
      v-model:show="showGender"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        title="性别"
        :default-index="userInfo.gender"
        :columns="columns"
        @confirm="onConfirm"
      />
    </van-popup>
    <!-- 地区选择弹出层 -->
    <van-popup
      v-model:show="showArea"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-area
        title="地区"
        :area-list="areaList"
        :columns-num="2"
        :value="userInfo.area"
        @confirm="onAreaConfirm"
      />
    </van-popup>
  </div>
</template>

<script lang="ts" setup>
import MyNavBar from '@/components/MyNavBar.vue'
import MyCell from '@/components/MyCell.vue'
import { computed, getCurrentInstance, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { editUser } from '../../api/user'
import { areaList } from '../../utils/area'

// Vuex相关
const store = useStore()
const userInfo = store.getters.getUserInfo

// 路由相关
const router = useRouter()

// 实例相关
const instance: any = getCurrentInstance()

// 模型相关
const showGender = ref(false)
const columns = ref(['未知', '男', '女'])
const showArea = ref(false)

// 计算属性
const avatar = computed(() => {
  return `${import.meta.env.VITE_APP_BASEURL}${userInfo.avatar}`
})

// 性别相关
const gender = computed(() => {
  // 性别:0(未知) 1(男) 2(女)
  let genderName = ''
  switch (userInfo.gender) {
    case 0:
      genderName = '未知'
      break

    case 1:
      genderName = '男'
      break

    case 2:
      genderName = '女'
      break

    default:
      break
  }

  return genderName
})

const onConfirm = async (value: any, index: number) => {
  const res: any = await editUser({ gender: index })

  if (res.code === 200) {
    showGender.value = false

    instance.ctx.$toast('修改信息成功~')

    // 更新userInfo的值
    userInfo.gender = index

    // 更新vuex中的内容
    store.commit('user/setUserInfo', {
      ...userInfo,
      gender: index
    })
  }
}

// 地区相关
const onAreaConfirm = async (areaList: any) => {
  const res: any = await editUser({ area: areaList[1].code })

  if (res.code === 200) {
    showArea.value = false

    instance.ctx.$toast('修改信息成功~')

    // 更新userInfo的值
    userInfo.area = areaList[1].code

    // 更新vuex中的内容
    store.commit('user/setUserInfo', {
      ...userInfo,
      area: areaList[1].code
    })
  }
}

// 退出登录
const logout = async () => {
  try {
    await instance.ctx.$dialog.confirm({
      title: '提示',
      message: '确认退出吗？'
    })

    // 清空vuex中的内容
    store.commit('user/setToken', null)
    store.commit('user/setUserInfo', null)

    // 跳转到登录页面
    router.push('/login')
  } catch (error) {
    console.log('error is ', error)
  }
}
</script>

<style lang="less" scoped>
.info-container {
  .content {
    padding: 15px;
    .head {
      width: 345px;
      height: 60px;
      display: flex;
      align-items: center;
      opacity: 1;
      background: #ffffff;
      border-radius: 8px;
      .head-cell {
        border-radius: 8px;
      }
    }
    .body {
      margin-top: 15px;
      width: 345px;
      height: 220px;
      .my-cell {
        height: 55px;
      }
      .top {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }
      .bottom {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    }
    .footer {
      margin-top: 15px;
      width: 345px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 16px;
      opacity: 1;
      background: #ffffff;
      border-radius: 8px;
      color: #e40137;
    }
  }
}
</style>
